<template>
<div class="tabe-content">
  <el-table
    :data="tableData"
    style="width: 100%;backgroundColor: transparent;"
    :height="props.height"
    :width="700"
    border
    :row-class-name="tableRowClassName"
  >
    <el-table-column prop="作业计划编号" label="作业计划编号" align="center" width="120" show-overflow-tooltip>
      <!-- <template #default="scope">
          <a @click="onClick(scope.row)" class="clickabe">{{scope.row.工作单编号}}</a>
      </template> -->
    </el-table-column>
    <el-table-column prop="序号" label="序号" align="center" width="100" show-overflow-tooltip />
    <el-table-column prop="计划编号" label="计划编号" align="center" width="100" show-overflow-tooltip />
    <el-table-column prop="工作票编号" label="工作票编号" align="center" width="100" show-overflow-tooltip />
    <el-table-column prop="负责人" label="负责人" align="center" width="100" show-overflow-tooltip />
    <el-table-column prop="监看时长" label="监看时长" align="center" width="100" show-overflow-tooltip />
    <el-table-column prop="未完成度" label="未完成度" align="center" width="100" show-overflow-tooltip />
    <el-table-column prop="实际开始时间" label="实际开始时间" align="center" width="120" show-overflow-tooltip />
    <el-table-column prop="实际结束时间" label="实际结束时间" align="center" width="120" show-overflow-tooltip />
    <el-table-column prop="作业任务" label="作业任务" align="center" width="100" show-overflow-tooltip />
    <el-table-column prop="风险等级" label="风险等级" align="center" width="100" show-overflow-tooltip />
    <el-table-column prop="作业类型" label="作业类型" align="center" width="100" show-overflow-tooltip />
    <el-table-column prop="专业分类" label="专业分类" align="center" width="100" show-overflow-tooltip />
    <el-table-column prop="计划开始时间" label="计划开始时间" align="center" width="120" show-overflow-tooltip />
    <el-table-column prop="计划结束时间" label="计划结束时间" align="center" width="120" show-overflow-tooltip />
    <el-table-column fixed="right" label="操作" align="center" min-width="120">
      <template #default="scope">
        <el-button type="primary" size="small" @click="handleClick(scope.row)">
          elink通知
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
    <!-- jumper -->
    <el-pagination
      :current-page="currentPage"
      :pager-count="6"
      :page-size="10"
      :page-sizes="[10, 20, 30, 40]"
      :background="background"
      layout="total, prev, pager, next"
      :total="props.data.length"
      size="small"
      @current-change="handleCurrentChange"
      
    />
    <!-- :hide-on-single-page="true" -->
  </div>
</div>
  
  
</template>

<script lang="ts" setup>
import { ref, watch, defineEmits } from 'vue'
interface User {
  id: string
}

const props = defineProps({
  height: {
    type: Number,
    default: 250,
  },
  data: {
    type: Array,
    default: () => []
  }
});

// 定义 emits
const emits = defineEmits(['onChose']);

const onClick = (val) => {
  // 触发事件并传递数据
  emits('onChose', val);
};

const handleClick = (val) => {
  console.log('点击操作',val);
  
};


const currentPage = ref(1)
const background = ref(true)
const handleCurrentChange = (val: number) => {
  console.log(val,'val');
  
  currentPage.value = val
}
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex % 2 === 0) {
    return 'warning-row'
  }
  return 'tableBack'
}

const handleData = (val, pageNumber)=>{
        if (pageNumber < 1) {
            return null;
        }
        
        const startIndex = (pageNumber - 1) * 10;
        const endIndex = startIndex + 10;
        return [...val].slice(startIndex, endIndex);
    }

const tableData = ref(handleData(props.data, 1))
// const tableData = ref([])



// 监听多个表单字段
watch(
  [
    () => props.data,
    () => currentPage.value,
  ],
  ([newData, newCurrentPage],[oldData, oldCurrentPage]) => {
    // console.log(newData,'newData--------------');
    if (newCurrentPage === oldCurrentPage) {
      tableData.value = handleData(newData, 1)
      currentPage.value = 1
    }else {
      tableData.value = handleData(props.data, newCurrentPage)
    }
    
  },
  { deep: true }
)


</script>

<style scoped lang="scss">
.tabe-content{
  width: 100%;
  // overflow: auto;
  position: relative;
  .clickabe{
    color: #02a7f0;
    cursor: pointer;
  }
  .page{
    position: absolute;
    right: 8px;
    margin-top: 8px;
    color: white;
  }
::v-deep() {
  .page .el-pagination__total{
    color: white;
  }
  .page .el-pagination__goto{
    color: white;
  }
  .el-table th.el-table__cell {
    background-color: #083967;
    color: white;
  }
  .el-table .el-table__row {
    background-color: #083967;
    color: white;
  }
  .el-table .warning-row {
    background-color: #2b3b58;
  }
  // .el-table .el-table-fixed-column--right {
  //   background-color: white;
  //   z-index: 99;
  //   position: relative;
  // }
  // .el-table .el-table-fixed-column--right:hover {
  //   background-color: white;
  //   z-index: 99;
  //   position: relative;
  // }
  /* 移除表格行的hover效果 */
        .el-table .el-table__body tr:hover > td {
            background-color: transparent;
        }
        .el-table .el-table__body tr.hover-row > td {
            background-color: transparent;
        }
  // .el-table .success-row {
  //   --el-table-tr-bg-color: var(--el-color-success-light-9);
  // }
}
}


</style>
